<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>_ExpandingTextAreaMixin tests</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../../themes/dijit.css";

		#table {
			margin: 0;
			padding: 2px;
		}
		#table, TEXTAREA {
			font-family: monospace;
			font-size: 12pt;
		}
		#table .layout {
			padding: 2px;
			font-size: 100%;
			margin: 0;
		}
	</style>
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.Textarea");
		dojo.require("dojox.mobile.ExpandingTextArea");

		dojo.ready(function(){

			var maxLengthNativeSupport = "maxLength" in document.createElement("textarea");

			doh.register("attributes", [
				{
					name: "dijit",
					runTest: function(){
						var dijit_attributes = dijit.byId('dijit_attributes');
						doh.is("", dijit_attributes.textbox.value, "dijit original value");
						doh.is("", dijit_attributes.get('value'), "dijit original get('value')");
						if(maxLengthNativeSupport){
							doh.is("20", dijit_attributes.textbox.getAttribute("maxlength"), "dijit original maxLength");
						}
						doh.is("20", dijit_attributes.get('maxLength'), "dijit original get('maxLength')");
						dijit_attributes.set('maxLength', "9");
						doh.is("", dijit_attributes.textbox.value, "dijit value");
						doh.is("", dijit_attributes.get('value'), "dijit get('value')");
						if(maxLengthNativeSupport){
							doh.is("9", dijit_attributes.textbox.getAttribute("maxlength"), "dijit maxLength");
						}
						doh.is("9", dijit_attributes.get('maxLength'), "dijit get('maxLength')");
						// cols
						doh.is("20", dijit_attributes.textbox.getAttribute("cols"), "dijit original cols");
						doh.is("20", dijit_attributes.get('cols'), "dijit original get('cols')");
						dijit_attributes.set('cols', "19");
						doh.is("19", dijit_attributes.textbox.getAttribute("cols"), "dijit cols");
						doh.is("19", dijit_attributes.get('cols'), "dijit get('cols')");
					}
	 			},
				{
					name: "mobile",
					runTest: function(){
						var mobile_attributes = dijit.byId('mobile_attributes');
						doh.is("", mobile_attributes.textbox.value, "mobile original value");
						doh.is("", mobile_attributes.get('value'), "mobile original get('value')");
						if(maxLengthNativeSupport){
							doh.is("20", mobile_attributes.textbox.getAttribute("maxlength"), "mobile original maxLength");
						}
						doh.is("20", mobile_attributes.get('maxLength'), "mobile original get('maxLength')");
						mobile_attributes.set('maxLength', "9");
						doh.is("", mobile_attributes.textbox.value, "mobile value");
						doh.is("", mobile_attributes.get('value'), "mobile get('value')");
						if(maxLengthNativeSupport){
							doh.is("9", mobile_attributes.textbox.getAttribute("maxlength"), "mobile maxLength");
						}
						doh.is("9", mobile_attributes.get('maxLength'), "mobile get('maxLength')");
						// cols
						doh.is("20", mobile_attributes.textbox.getAttribute("cols"), "mobile original cols");
						doh.is("20", mobile_attributes.get('cols'), "mobile original get('cols')");
						mobile_attributes.set('cols', "19");
						doh.is("19", mobile_attributes.textbox.getAttribute("cols"), "mobile cols");
						doh.is("19", mobile_attributes.get('cols'), "mobile get('cols')");
					}
	 			}
			]);

			doh.register("events", [
				{
					name: "dijit",
					timeout: 5000,
					runTest: function(){
						var
							d = new doh.Deferred(),
							dijit_events = dijit.byId('dijit_events'),
							nop = function(){ return false; };

						function onFocus(){
							dijit_events.set('onFocus', nop);
							dijit_events.set("value", "Focus");
							dijit_events.set('onBlur', onBlur);
							dijit.byId('mobile_events').focus();
						}
						function onBlur(){
							dijit_events.set('onChange', onChange);
							dijit_events.set('onBlur', nop);
							dijit_events.set("value", "Blur");
						}
						function onChange(){
							dijit_events.set('onChange', nop);
							dijit_events.set("value", "Change");
							dijit_events.focus();
							d.callback(true);
						}
						doh.is(nop.toString(), dijit_events.get('onFocus').toString(), "get('onFocus')");
						doh.is(nop.toString(), dijit_events.get('onBlur').toString(), "get('onBlur')");
						doh.is(nop.toString(), dijit_events.get('onChange').toString(), "get('onChange')");
						dijit_events.set('onFocus', onFocus);
						setTimeout(dojo.hitch(dijit_events, "focus"), 0);

						return d;
					}
	 			},
				{
					name: "mobile",
					timeout: 10000,
					runTest: function(){
						var
							d = new doh.Deferred(),
							mobile_events = dijit.byId('mobile_events'),
							focusHandle, blurhandle,
							nop = function(){ return false; };

						function onFocus(){
							mobile_events.disconnect(focusHandle);
							mobile_events.set("value", "Focus");
							blurhandle = mobile_events.connect(mobile_events, '_onBlur', onBlur);
							dijit.byId('dijit_events').focus();
						}
						function onBlur(){
							mobile_events.set('onChange', onChange);
							mobile_events.disconnect(blurhandle);
							mobile_events.set("value", "Blur");
						}
						function onChange(){
							mobile_events.set('onChange', nop);
							mobile_events.set("value", "Change");
							mobile_events.focus();
							d.callback(true);
						}
						doh.is(nop.toString(), mobile_events.get('onChange').toString(), "get('onChange')");
						mobile_events.textbox.value = "changing";
						focusHandle = mobile_events.connect(mobile_events, '_onFocus', onFocus);
						setTimeout(dojo.hitch(mobile_events, "focus"), 0);

						return d;
					}
	 			}
			]);

			doh.register("programmatic", [
				{
					name: "dijit",
					timeout: 5000,
					runTest: function(){
						new dijit.form.Textarea({id:"dijit_programmatic", value:"No srcNodeRef", "aria-label":"dijit_programmatic"}).placeAt("dijit_programmatic_container", "first");
						var dijit_programmatic = dijit.byId('dijit_programmatic');
						dijit_programmatic.resize();
						var focushandle = dijit_programmatic.connect(dijit_programmatic, '_onFocus',
							function(){
								d.getTestCallback(function(){
									dijit_programmatic.disconnect(focushandle);
									var pos = dojo.position(dijit_programmatic.domNode, true);
									doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'dijit position');
									doh.is("No srcNodeRef", dijit_programmatic.textbox.value, 'dijit textbox value');
									doh.is("No srcNodeRef", dijit_programmatic.get('value'), 'dijit widget value');
								})();
							}
						);
						var d = new doh.Deferred();
						setTimeout(dojo.hitch(dijit_programmatic, "focus"), 0);
						return d;
					}
	 			},
				{
					name: "mobile",
					timeout: 5000,
					runTest: function(){
						new dojox.mobile.ExpandingTextArea({id:"mobile_programmatic", value:"No srcNodeRef","aria-label":"mobile_programmatic"}).placeAt("mobile_programmatic_container", "first");
						var mobile_programmatic = dijit.byId('mobile_programmatic');
						mobile_programmatic.resize();
						var focushandle = mobile_programmatic.connect(mobile_programmatic, '_onFocus',
							function(){
								d.getTestCallback(function(){
									mobile_programmatic.disconnect(focushandle);
									var pos = dojo.position(mobile_programmatic.domNode, true);
									doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
									doh.is("No srcNodeRef", mobile_programmatic.textbox.value, 'mobile textbox value');
									doh.is("No srcNodeRef", mobile_programmatic.get('value'), 'mobile widget value');
								})();
							}
						);
						var d = new doh.Deferred();
						setTimeout(dojo.hitch(mobile_programmatic, "focus"), 0);
						return d;
					}
	 			}
			]);

			doh.register("sizes", [
				{
					name: "dijit",
					runTest: function(){
						var dijit_size = dijit.byId('dijit_size');
						var originalH = dijit_size.domNode.offsetHeight;
						var originalVal = dijit_size.value;
						dijit_size.set('value', originalVal + "\n");
						var newH = dijit_size.domNode.offsetHeight;
						doh.t(newH > originalH, "expand: " + newH + ' ' + originalH);
						dijit_size.set('value', originalVal);
						newH = dijit_size.domNode.offsetHeight;
						doh.is(newH, originalH, "shrink: " + newH + ' ' + originalH);
					}
	 			},
				{
					name: "mobile",
					runTest: function(){
						var mobile_size = dijit.byId('mobile_size');
						var originalH = mobile_size.domNode.offsetHeight;
						var originalVal = mobile_size.value;
						mobile_size.set('value', originalVal + "\n");
						var newH = mobile_size.domNode.offsetHeight;
						doh.t(newH > originalH, "expand: " + newH + ' ' + originalH);
						mobile_size.set('value', originalVal);
						newH = mobile_size.domNode.offsetHeight;
					}
	 			}
			]);

			doh.run();
		});
	</script>
</head>
<body class="claro" role="main">
	<h1 class="testTitle">_ExpandingTextAreaMixin (dijit and mobile) non-robot tests</h1>
	<table id="table">
		<tr>
			<th class="layout">&nbsp;</th>
			<th class="layout">dijit</th>
			<th class="layout">mobile</th>
		</tr>
		<tr>
			<td class="layout">attributes</td>
			<td class="layout"><input id="dijit_attributes" aria-label="dijit_attr" data-dojo-type="dijit/form/Textarea" data-dojo-props='value:"", placeHolder:"original", maxLength:"20", cols:20'/></td>
			<td class="layout"><textarea id="mobile_attributes" aria-label="mobilet_attr" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props='cols:20, placeHolder:"original", maxLength:20'></textarea></td>
		</tr>
		<tr>
			<td class="layout">Events</td>
			<td class="layout"><input id="dijit_events" aria-label="dijit_events"data-dojo-type="dijit/form/Textarea" data-dojo-props='value:"", onFocus:function(){ return false; }, onBlur:function(){ return false; }, onChange:function(){ return false; }'/></td>
			<td class="layout"><textarea id="mobile_events" aria-label="mobile_events" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props='onChange:function(){ return false; }'></textarea></td>
		</tr>
		<tr>
			<td class="layout">Programmatic</td>
			<td class="layout" id="dijit_programmatic_container"></td>
			<td class="layout" id="mobile_programmatic_container"></td>
		</tr>
		<tr>
			<td class="layout">Size</td>
			<td class="layout"><textarea id="dijit_size" aria-label="dijit_size" data-dojo-type="dijit/form/Textarea" data-dojo-props=''
>line 1
line 2
line 3</textarea></td>
			<td class="layout"><textarea id="mobile_size" aria-label="mobile_size" data-dojo-type="dojox.mobile.ExpandingTextArea" data-dojo-props=''
>line 1
line 2
line 3</textarea></td>
		</tr>
	</table>
</body>
</html>
